// 商品id
let proid = new URLSearchParams(location.search).get("id");
// 商品封面图片
let coverImage = new URLSearchParams(location.search).get("coverImg");
// 获取外层大容器
let detail = document.querySelector(".detail");

// 获取商品更多信息的容器
let cont  = document.querySelector(".cont");

// 获取所有的选项卡小li
let lis = document.querySelectorAll(".more-head li");

// 获取更多信息区域下tab选项
let coms = document.querySelectorAll(".wrape .coms")

// 发送评论按钮
let btn = document.querySelector(".send");
// 评论输入框
let ipt = document.querySelector(".conwrape-con textarea");
// 评论图片框ipt
let img  = document.querySelector(".img");
// 上传图片按钮
let fil = document.querySelector(".filewrape label");

// 渲染评论信息
let readlist = document.querySelector(".readlist");

// 查看评论按钮
let cli = document.querySelector("#cli");

let token = localStorage.getItem("token");
let host = "http://127.0.0.1:1337";

// 上传图片
fil.onchange = async function() {
    // 头部设置token参数
    let inp = this.children[0];
    let files = inp.files[0]; 
    let fd = new FormData();
    fd.append("file",files);
    axios.defaults.headers.common["token"] = token;
    let comUrl =host + "/api/v1/common/upload_file";
    let pfile = await axios.post(comUrl,fd);
    console.log(pfile.data.data);
    let imgurl =host + pfile.data.data;
    img.innerHTML = `<img src="${imgurl}"></img>`
    ipt.setAttribute("cover",pfile.data.data);
}

// 商品评论
btn.onclick = async function() {
    let content = ipt.value;
    axios.defaults.headers.common["token"] = token;
    let img = host + ipt.getAttribute("cover");
    let data = {content,coverImage:img};
    let coUrl = host + `/api/v1/product_comments/${proid}`;
    let pcom = await axios.post(coUrl,data);
    if(pcom.data.code==1) {
        alert("评论成功");
    }
    ipt.value = "";
    document.querySelector(".img").innerHTML="";
   
}


// 渲染商品主要信息
async function render() {
    let detailUrl = host +  `/api/v1/products/${proid}`;
    let shopDetail = await axios.get(detailUrl);
    let shopInfo = shopDetail.data.data;
     console.log(shopInfo);
     if(shopInfo.coverImage.split("/")[1]=="uploads") {
          shopInfo.coverImage = host+ shopInfo.coverImage;
       } 
       let str = `  
       <div class="detail-left">
       <img src="${shopInfo.coverImage}" alt="">
       <div class="maskbox" style="display: none;"></div>
       <div class="mask">
           <img src="${shopInfo.coverImage}" alt="">
       </div>
    </div>
    <div class="detail-right">
       <div class="dl-title">
           <span>千锋超市</span>
           <strong>${shopInfo.name}</strong>
       </div>
       <div class="dl-price">
           <div class="dl-price-top">
               <span>预约抢购</span>
               <span>1707人<i>预约</i></span>
               <span>抢购结束剩余<i class="h">23</i>小时<i class="m">24</i>分<i class="s">2</i>秒</i></span>
           </div>
           <div class="dl-price-bottom">
             <div class="price common">
                <div class="common-left">千锋价</div>
                <div class="common-right">￥${shopInfo.price}</div>
             </div>
             <div class="dazhe common">
                 <div class="common-left">促销</div>
                 <span>限购</span>
                 <div class="common-right">超过一件时享受单件价￥${shopInfo.price}，超出数量以结算价</div>
             </div>
             <div class="maner common">
                <span>商品详情</span>
                <div class="common-right">${shopInfo.desc}</div>
            </div>
            <div class="maner common">
                <span>精品</span>
                <div class="common-right">柯锋店长精心推荐,顾客满意度100%<i>❤</i></div>
            </div>
           </div>
       </div>
       <!-- 配送 -->
       <div class="dc">
           <div class="common-left">配送至</div>
           <div class="dc-right">
            <select name="" id="">
                <option value="">河南省郑州市登封市白坪乡</option>
                <option value="">河南省洛阳市</option>
                <option value="">河南省鹤壁市</option>
                <option value="">河南省周口市</option>
            </select>
            <span class="none">无货</span>
            <span class="prodone">此商品暂时售完</span>
            <span class="support">支持<a href="javascript:'">可配送港澳</a></span>   
           </div>     
       </div>
    </div>   
       `;
   detail.innerHTML = str;
   cont.innerHTML =shopInfo.content;
   //放大镜功能
   let detailLeft = document.querySelector(".detail-left")
   let mask = document.querySelector(".mask");
   // 遮罩层
   let maskbox = document.querySelector(".maskbox");
   let bigimg = mask.querySelector(".mask img");
   //放大镜函数
   loupe(detailLeft, maskbox, mask, bigimg);

   let page = 0;
   lis.forEach((li,index)=> {
       li.onclick = function() {
           lis[page].classList.remove("current");
           coms[page].style.left = 1000+"px";
           
           lis[index].classList.add("current");
           coms[index].style.left = 0; 
           if(li.getAttribute("id")=="cli") {
                renderComm();
           }
           page = index;
       }
   })
}

render();
// 渲染评论信息
async function renderComm() {
    let vieUrl = host + `/api/v1/product_comments/${proid}`;
    let vieP = await axios.get(vieUrl);
    console.log(vieP.data.data);
    let commarr = vieP.data.data;
    let comminfo = commarr.map(item=> {
        return `
        <li>
        <div class="user">${item.user.userName}</div>
        <div class="time">${item.createdAt}</div>
        <div class="comimg"><img src="${item.coverImage}" alt=""></div>   
        <div class="readcom">
           ${item.content}
        </div>
    </li>
        `
    }).join("");
    readlist.innerHTML = comminfo;
}

renderComm();







